/* 首页导航栏 */
#nav{
    width: 100%;
    height: 60px;
    position: fixed;
    background:#3498db4c;
    z-index: 10;
    /* margin-top: -60px; */
}
#nav-left{
    width: 250px;
    height: 60px;
    float: left;
    padding-left: 50px;
    /* background: red; */
}
#nav-left h1 a img{
    width: 55px;
    height: 55px;
    float: left;
    /* logo一直旋转 */
    -webkit-transform: rotate(360deg);
    animation: rotation 10s linear infinite;
    -moz-animation: rotation 10s linear infinite;
    -webkit-animation: rotation 10s linear infinite;
    -o-animation: rotation 10s linear infinite;
}
/* logo一直旋转 */
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

#nav-left span{
    width: 180px;
    height: 55px;
    float: right;
    line-height: 55px;
    font-size: 18px;
}
#nav-right{
    width: 460px;
    height: 60px;
    float: right;
    padding-right: 50px;
    /* background: red; */
}
/* #nav-right input{
    width: 160px;
    height: 30px;
    /* float: right;
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding-left: 15px;
} */
#nav-right p{
    float: left;
    width: 320px;
    height: 55px;
    line-height: 60px;
    font-size: 16px;
}
.icon-search,.icon-list,.icon-cog{
    float: left;
    font-size: 22px;
    padding: 5px;
    margin-left: 11px;
    margin-top: 14px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
    color:rgba(105, 90, 205, 0.7);
}
.icon-search:hover{
    color: rgba(255, 255, 255, 0.5);
    background:rgba(105, 90, 205, 0.7);
}
.icon-list:hover{
    color: rgba(255, 255, 255, 0.5);
    background:rgba(105, 90, 205, 0.7);
}
.icon-cog:hover{
    color: rgba(255, 255, 255, 0.5);
    background:rgba(105, 90, 205, 0.7);
}
#install{
    height: 60px;
    float: right;
    margin-right: 10px;
    /* line-height: 66px; */
}
#icons{
    display: none;
    width: 30px;
    position: absolute;
    top: 60px;
    right: 55px;
    text-align: center;
    padding: 5px 5px;
    background: #3498db47;
    cursor: pointer;
}
#icons span{
    /* display: none; */
    font-size: 25px;
    color: rgba(105, 90, 205, 0.7);
}

/* 首页主体部分 */
#main-top{
    width: 1400px;
    height: 450px;
    /* background-color: cadetblue; */
    margin: 0 auto;
    padding-top: 120px;
}
#main-top-left{
    float: left;
    width: 500px;
    height: 350px;
    margin-top: 50px;
    margin-left: 50px;
    /* background: palevioletred; */
}
#main-top-left h1{
    width: 450px;
    height: 50px;
    margin-left: 50px;
    font-size: 40px;
    /* background: darkmagenta; */
}
#main-top-left h2{
    width: 450px;
    height: 50px;
    margin-left: 50px;
    margin-top: 30px;
    font-size: 25px;
    /* background: darkgreen; */
}
.main-top-left{
    float: left;
    margin-top: 150px;
    margin-left: 50px;
    /* background:darkgoldenrod; */
}
.main-top-left a:first-child{
    margin-left: 120px;
}
.main-top-left a{
    font-size: 30px;
    margin-right: 30px;
    /* background: darkmagenta; */
}
/*设置轮播图的边框相对定位*/
.play-box{
    float: right;
    position:relative;
    width:600px;
    height: 398px;
    /* margin:50px auto; */
    /* margin-top: 40px; */
    margin-right: 50px;
    border:1px solid #ccc;
}
/*设置边框下的图片*/
.play-box img{
    width:600px;
    height:398px;
    border:0;
}
/*设置超链接下的所有图片不显示*/
.play-box a{
    display:block; /*现在是文本状态，要修改为块状*/
    overflow:hidden; /*隐藏超过边框高度的图片*/
    opacity:0; /*默认图片为全透明*/
    height:0; /*默认高度为0*/
    transition:opacity .5s; /*默认透明度过渡时间为0.5s*/
}
/*设置当前图片显示*/
#imgList a.current{
    opacity:1; /*默认图片显示*/
    height:auto; /*默认高度为自动*/
}
/*设置列表ul*/
ul{
    margin:0;
    padding:0;
    list-style:none;
}
/*设置列表ul下的li*/ 
ul li{
    width:10px;
    height:10px;
    margin:0 4px;
    font-size:0;
    border-radius:50%;
    background-color:darkgray;
    cursor:pointer;
    float:left;
}
/*当图片变化时，图标也跟着变化*/
ul li.current{
    background-color:peru;
}
/*设置图标绝对定位*/
.iconList{
    position:absolute;
    bottom:10px;
    left:50%;
    margin-left:-45px;
}
/*设置向左向右图标*/
.sliderbar{
    position:absolute;
    top:50%;
    margin-top:-25px;
    width:30px;
    height:50px;
    font-family:simsun;
    color:#fff;
    text-align:center;
    line-height:50px;
    background-color:#000;
    opacity:.6;
    display:none;
    cursor:pointer;
}
/*设置向左图标*/
.slidebar-left{
    left:0;
}
/*设置向右图标*/
.slidebar-right{
    right:0;
}

/* Look Down部分 */
#look{
    width: 1000px;
    height: 200px;
    /* background: plum; */
    margin: 0 auto;
}
.lookdown{
    width: 320px;
    height: 50px;
    margin: 0 auto;
    /* background: saddlebrown; */
}
.look-left{
    float: left;
    width: 60px;
    height: 20px;
    /* background: royalblue; */
    margin-top: 25px;
    border-top: 3px solid #3498db;
}
.lookdown span{
    width: 150px;
    height: 50px;
    font-size: 30px;
    line-height: 50px;
    margin-left: 20px;
}
.look-right{
    float: right;
    width: 60px;
    height: 20px;
    margin-top: 25px;
    /* background: royalblue; */
    border-top: 3px solid #3498db;
}
#look p{
    width: 800px;
    height: 70px;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 16px;
    line-height: 30px;
    /* background: saddlebrown; */
}
#look a{
    /* width: 200px; */
    height: 30px;
    font-size: 18px;
    padding: 6px;
    margin-left: 100px;
    border: 2px solid #3498db;
    border-radius: 20px;
    color: #3498db;
    font-weight: 500;
}
#look a:hover{
    color: snow;
    background: #3498db;
}

/* 主页面固定bear图片 */
#bear{
    width: 150px;
    height: 250px;
    position: relative;
    /* background: #3498db; */
    left: 1090px;
    top: -200px;

    /* 实现图片上下浮动，不能固定 */
    /* -webkit-animation: bounce-down 1.6s linear infinite;
    animation: bounce-down 1.6s linear infinite; */

}
#bear img{
    width: 150px;
    height: 200px;
    position: fixed;
}

/* 实现图片上下浮动，不能固定 */
/* @-webkit-keyframes bounce-down {
    25% {
         -webkit-transform: translateY(-4px);
    }
    50%, 100% {
         -webkit-transform: translateY(0);
    }
    75% {
         -webkit-transform: translateY(4px);
    }
}
@keyframes bounce-down {
     25% {
          transform: translateY(-4px);
     }
     50%, 100% {
          transform: translateY(0);
     }
     75% {
          transform: translateY(4px);
     }
} */


/* 博客文章部分  */
#primary{
    width: 100%;
    /* background: thistle; */
}
/* 第一个博客内容 */
.post:nth-child(odd){
    width: 1200px;
    height: 430px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 80px;
    /* background: violet; */
}
.post:nth-child(even){
    width: 1200px;
    height: 430px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 80px;
    /* background: violet; */
}
.post:nth-child(odd) a{
    overflow: hidden;
    position: relative;
    z-index: 4;
}
.post:nth-child(even) a{
    overflow: hidden;
    position: relative;
    z-index: 4;
}
.post:nth-child(odd) a img{
    width: 680px;
    height: 360px;
    float: left;
}
.post:nth-child(even) a img{
    width: 680px;
    height: 360px;
    float: right;
    position: absolute;
    left: 480px;
    top: -30px;
}
.post:nth-child(odd) .postright{
    width: 350px;
    height: 200px;
    position: absolute;
    /* text-align: left; */
    left: 655px;
    top: 30px;
    border: 1px solid #eaeaea;
    padding: 80px 80px;
    background: #eee;
}
.post:nth-child(even) .postright{
    width: 350px;
    height: 200px;
    /* position: absolute;
    /* text-align: left; */
    /* left: 655px;
    top: 30px; */
    position: relative;
    border: 1px solid #eaeaea;
    padding: 80px 80px;
    background: #eee;
}
.postright h3{
    font-size: 26px;
    color: #999;
}
.postright p{
    margin: 10px 0;
    font-size: 14px;
    /* background: rosybrown; */
}
.icon-eye{
    font-size: 12px;
}
.postdata{
    float: right;
    font-size: 12px;
    color: #444;
}
/* Read More部分 */
#readmore{
    text-align: center;
}
#readmore span{
    padding: 10px 40px;
    border: 1px solid #3498db;
    font-size: 20px;
    color: #3498db;
}
#readmore span:hover{
    color: #fff;
    background: #3498db;
}
#footer{
    width: 500px;
    height: 100px;
    margin: 0 auto;
    margin-top: 30px;
}

